<template>
  <div class="box_card">
    <el-row style="height: 100%; ">
      <el-col
        :xs="24"
        :span="8"
        style="height: calc(100% - 20px);"
      >
        <hu-card style="height: 100%; ">
          <el-form
            :inline="true"
            label-width="70px"
          >
            <el-form-item
              label="模块名称"
              prop="moduleName"
            >
              <el-input
                v-model="queryParams.moduleName"
                placeholder="请输入模块名称"
                style="width: 150px"
              />
            </el-form-item>
            <el-form-item style="float: right;">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchList"
                style="font-size: 14px;"
              >搜索</el-button>
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="handleAdd"
                style="font-size: 14px; margin-left:10px"
              >添加</el-button>
            </el-form-item>
          </el-form>
          <hu-table
            :tableData="tableData"
            :loading="MixinLoading"
            :tableCol="tableCol"
            highlightCurrentRow
            @row-click="rowClick"
          >
            <template v-slot:operate="{ row }">
              <el-button
                type="text"
                @click.stop="handleUpdate(row)"
              >修改</el-button>
              <el-button
                type="text"
                @click.stop="handleDelete(row)"
              >删除</el-button>
            </template>
          </hu-table>
          <pagination
            style="width: 75%;margin: 10px auto;"
            layout="prev, pager, next, jumper"
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </hu-card>
      </el-col>
      <el-col
        :xs="24"
        :span="16"
        style="height: calc(100% - 20px); "
      >
        <hu-card style="margin: 0 15px 0 0; height: 100%;">
          <!-- <el-form
            :inline="true"
            label-width="70px"
          >
            <el-form-item
              label="指令"
              prop="dictName"
            >
              <el-input
                v-model="queryParams2.name"
                placeholder="请输入指令"
                style="width: 220px"
              />
            </el-form-item>
            <el-form-item style="float: right;">
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  :disabled="!moduleId"
                  @click="searchList2"
                  style="font-size: 14px;"
                >搜索</el-button>

              </div>
            </el-form-item>
          </el-form> -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            :disabled="!moduleId"
            @click="addList2"
            style="font-size: 14px;margin-bottom: 10px;"
          >添加</el-button>
          <hu-table
            :tableData="tableData2"
            :loading="MixinLoading"
            :tableCol="tableCol2"
          >

            <template v-slot:active="{ row }">
              {{ activeList.filter(item => item.value === row.active)[0].label }}
            </template>
            <template v-slot:activeResponseType="{ row }">
              {{ activeResponseList.filter(item => item.value === row.activeResponseType)[0].label }}
            </template>
            <template v-slot:operate="{ row }">
              <el-button
                type="text"
                @click="handleUpdate2(row)"
              >修改</el-button>
              <el-button
                type="text"
                @click="handleDelete2(row)"
              >删除</el-button>
            </template>
          </hu-table>
          <pagination
            v-show="total2 > 0"
            :total="total2"
            :page.sync="queryParams2.pageNum"
            :limit.sync="queryParams2.pageSize"
            @pagination="getList2"
          />
        </hu-card>
      </el-col>
    </el-row>
    <hu-modal
      :title="formChart.moduleId ? '修改-业务模块' : '新增-业务模块'"
      :show-modal.sync="openDrawer"
      :loading="MixinLoading"
      @submit="addFrom"
    >
      <!-- tent sta -->
      <div style="display: flex; justify-content: center;">
        <el-form
          ref="dataForm"
          :model="formChart"
          :rules="rulesSon"
          label-width="110px"
          style="margin-top:10px;"
          class="mt10"
        >
          <el-form-item
            label="模块名称"
            prop="moduleName"
          >
            <el-input
              v-model="formChart.moduleName"
              placeholder="请输入模块名称"
              style="width:320px"
            />
          </el-form-item>
          <el-form-item
            label="移动端地址"
            prop="mobileUrl"
          >
            <el-input
              v-model="formChart.mobileUrl"
              placeholder="请输入移动端地址"
              style="width:320px"
            />
          </el-form-item>
          <el-form-item
            label="PC地址"
            prop="webUrl"
          >
            <el-input
              v-model="formChart.webUrl"
              placeholder="请输入PC地址"
              style="width:320px"
            />
          </el-form-item>
          <el-form-item
            label="维护编码"
            prop="beanName"
          >
            <el-input
              v-model="formChart.beanName"
              placeholder="请输入维护编码"
              style="width:320px"
            />
          </el-form-item>
          <el-form-item
            label="排序"
            prop="sort"
          >
            <el-input
              type="number"
              v-model="formChart.sort"
              placeholder="请输入排序"
              style="width:320px"
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-modal>
    <hu-modal
      :title="formChart.id ? '修改-指令' : '新增-指令'"
      :show-modal.sync="openDrawer2"
      :loading="MixinLoading"
      @submit="addFrom2"
    >
      <!-- tent sta -->
      <div style="display: flex; justify-content: center;">
        <el-form
          ref="dataForm2"
          :model="formChart"
          :rules="rulesSon2"
          label-width="110px"
          style="margin-top:10px"
        >
          <el-form-item
            label="指令类型"
            prop="active"
          >
            <el-select
              v-model="formChart.active"
              placeholder="请选择指令类型"
              style="width:320px"
            >
              <el-option
                v-for="dict in activeList"
                :key="dict.value"
                :value="dict.value"
                :label="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="指令响应类型"
            prop="activeResponseType"
          >
            <el-select
              v-model="formChart.activeResponseType"
              placeholder="请选择指令类型"
              style="width:320px"
            >
              <el-option
                v-for="dict in activeResponseList"
                :key="dict.value"
                :value="dict.value"
                :label="dict.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="排序"
            prop="sort"
          >
            <el-input
              type="number"
              v-model="formChart.sort"
              placeholder="请输入排序"
              style="width:320px"
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-modal>
  </div>
</template>

<script>
import * as http from "@/api/repository/proModule.js";
export default {
  name: "SystemDict",
  data() {
    return {
      valueInput: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
      },
      moduleId: undefined,
      total: 0,
      total2: 0,
      tableData: [],
      tableCol: [
        {
          title: "模块名称",
          key: "moduleName",
        },
        {
          title: "移动端地址",
          key: "mobileUrl",
        },
        {
          title: "PC地址",
          key: "webUrl",
        },
        {
          title: "维护编码",
          key: "beanName",
        },
        {
          title: "排序",
          key: "sort",
        },
        {
          title: "操作",
          slot: "operate",
          width: 120,
          fixed: "right",
        },
      ],
      tableData2: [],
      tableCol2: [
        {
          title: "序号",
          type: "index",
          showOverflowTooltip: false,
          width: 50,
        },
        {
          title: "指令类型",
          slot: "active",
        },
        {
          title: "指令响应类型",
          slot: "activeResponseType",
        },
        {
          title: "排序",
          key: "sort",
          width: 70,
        },
        {
          title: "操作",
          slot: "operate",
          width: 120,
          fixed: "right",
        },
      ],
      openDrawer: false,
      openDrawer2: false,
      formChart: {},
      rulesSon: {
        moduleName: [
          { required: true, message: "模块名称不能为空", trigger: "blur" },
        ],
        // mobileUrl: [
        //   { required: true, message: "移动端地址不能为空", trigger: "blur" },
        // ],
        beanName: [
          { required: true, message: "维护编码不能为空", trigger: "blur" },
        ],
      },
      rulesSon2: {
        active: [
          { required: true, message: "指令类型不能为空", trigger: "change" },
        ],
        activeResponseType: [
          {
            required: true,
            message: "指令响应类型不能为空",
            trigger: "change",
          },
        ],
      },
      activeList: [
        { label: "提问", value: "QUERY" },
        { label: "下载", value: "DOWNLOAD" },
        { label: "打开", value: "OPEN" },
      ],
      activeResponseList: [
        { label: "文本", value: "MARKDOWN" },
        { label: "内部链接", value: "OWN_FILE_URL" },
        { label: "外部链接", value: "OWN_WEB_URL" },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // get list
    getList() {
      this.MixinLoading = true;
      let params = {
        ...this.queryParams,
      };
      http.getList(params).then(({ result }) => {
        this.tableData = result.records;
        this.total = result.total;
        this.MixinLoading = false;
      });
    },
    // reset 查询
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    // 表单重置
    reset() {
      this.formChart = {};
      this.resetForm("dataForm");
    },
    reset2() {
      this.formChart = {
        sort: 1,
      };
      this.resetForm("dataForm2");
    },
    handleAdd() {
      this.reset();
      this.openDrawer = true;
    },
    addList2() {
      this.reset2();
      this.openDrawer2 = true;
    },
    handleUpdate(row) {
      this.reset();
      this.formChart = {
        ...row,
      };
      this.openDrawer = true;
    },
    handleUpdate2(row) {
      this.reset2();
      this.formChart = {
        ...row,
      };
      this.openDrawer2 = true;
    },
    // 提交
    addFrom() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.MixinLoading = true;
          let params = {
            ...this.formChart,
          };
          if (this.formChart.moduleId != undefined) {
            http
              .updateList(params)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.openDrawer = false;
                this.getList();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          } else {
            http
              .addList({ ...params, isValid: 0 })
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.openDrawer = false;
                this.searchList();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          }
        }
      });
    },
    // 提交
    addFrom2() {
      this.$refs["dataForm2"].validate((valid) => {
        if (valid) {
          this.MixinLoading = true;
          let params = {
            moduleId: this.moduleId,
            ...this.formChart,
          };
          if (this.formChart.activeId != undefined) {
            http
              .updateList2(params)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.openDrawer2 = false;
                this.getList2();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          } else {
            http
              .addList2(params)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.openDrawer2 = false;
                this.searchList2();
              })
              .catch((err) => {
                this.MixinLoading = false;
              });
          }
        }
      });
    },
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteList(row.moduleId);
        })
        .then(() => {
          this.searchList();
          this.$modal.msgSuccess("删除成功");
        });
    },
    handleDelete2(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          this.MixinLoading = true;
          return http.deleteList2(row.activeId);
        })
        .then(() => {
          this.searchList2();
          this.$modal.msgSuccess("删除成功");
        });
    },
    rowClick(row) {
      this.moduleId = row.moduleId;
      this.searchList2();
    },
    // 查询
    searchList2() {
      this.queryParams2.pageNum = 1;
      this.getList2();
    },
    getList2() {
      this.MixinLoading = true;
      let params = {
        moduleId: this.moduleId,
        ...this.queryParams2,
      };
      http.getList2(params).then(({ result }) => {
        this.tableData2 = result.records;
        this.total2 = result.total;
        this.MixinLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box_card {
  height: calc(100vh - 130px);
  overflow: auto;
}
</style>
